<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script src="./lib/jquery.js"></script>
</head>

<body>
	<!-- 1. 文件选择框 -->
	<input type="file" id="file1" />
	<!-- 2. 上传文件的按钮 -->
	<button id="btnUpload">上传文件</button>

	<img src="" alt="">

	<div id='loading' style="display: none;">loading</div>

	<script>
		$(function() {
			
			$('#btnUpload').on('click', function() {
				//获取表单上传数据
				let files = $('#file1')[0].files
				//  使用Formdata对象
				let fm = new FormData()
				fm.append('avatar', files[0])
				//  发送ajax
				// 自 jQuery 版本 1.8 起，该方法只能被附加到文档
				$(document).ajaxStart(function() {
					$('#loading').show()
				})

				// 自 jQuery 版本 1.8 起，该方法只能被附加到文档
				$(document).ajaxStop(function() {
					$('#loading').hide()
				})
				$.ajax({
					url: 'http://www.liulongbin.top:3006/api/upload/avatar',
					type: 'post',
					data: fm,

					// 不修改 Content-Type 属性，使用 FormData 默认的 Content-Type 值
					contentType: false,
					// 不对 FormData 中的数据进行 url 编码，而是将 FormData 数据原样发送到服务器
					processData: false,
					success: function(res) {
						console.log(res, 9999);
						$('img').attr('src', 'http://www.liulongbin.top:3006' + res.url)
					},
					error:function(){

					}
				})

			})
		})
	</script>
</body>

</html>
